<template>
  <p style="text-align: center; font-size: x-large; margin-top: 10px;" v-show="show">暂无数据</p>

  <div id="main" style="width: 700px; height: 700px;"/>

</template>

<script setup lang = "ts">
import {ref} from "vue"
import * as echarts from "echarts"
import { onMounted } from "vue";
import {instance} from '@/utils/MyRequeest'
//声明周期函数，自动执行初始化
const show = ref(false)

onMounted(() => {
  init();
});
let classify:any
let classifyCount:any
//初始化函数
async function init() {
  /* 请求数据 */

 await instance({
  method:"get",
  url:'/page/show'
}).then((res:any)=>{
  console.log(res.data.data);
  if(res.data.data.length===0) {
    show.value = true
  }
  classify = res.data.data.map((item:any)=>{
    return item.classify
  })
  classifyCount = res.data.data.map((s:any)=>s.classtotle)
  
})
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));
  // 绘制图表
  let options = ref({
    title: {
      text: "文章详情",
    },
    tooltip: {},
    xAxis: {
      data: classify,
    },
    yAxis: {},
    series: [
      {
        name: "文章数量",
        type: "bar",
        data:classifyCount ,
      },
    ],
  });


  // 渲染图表
  Chart.setOption(options.value);
}

defineExpose ({
  classify
})


</script>

<style lang="css" scoped></style>